<template>
	<view class="container" v-if="!isLoading">
		<view class="box">

			<view class="top">
				<view style="font-size: 36rpx;">正在考试</view>
				<view style="font-size: 32rpx;"><text style="color: #1684FC;">{{num}}</text>/{{detail.choose_num}}
				</view>
			</view>
			<view class="content-box">
				<view class="left" v-if="detail.type>2&&detail.type<6">
					<view class="gif" v-if="is_play">
						<image src="../../../static/images/play.gif"></image>

					</view>
					<view class="gif" @click="start" v-if="!is_play">
						<image src="../../../static/images/play.png"></image>

					</view>

				</view>
				<view class="left" v-else>
					<view class="timu">{{timu_title}}</view>
				</view>



			</view>

			<view class="right">
				<u-circle-progress active-color="#1684FC" bg-color="#F1F7F7" width="90" border-width="4"
					:percent="percent" :duration="duration">
					<view class="u-progress-content">
						<view class="u-progress-dot" style="font-size: 28rpx;">
							<u-count-down ref="uCountDown" @change="change" bg-color="#F1F7F7" :timestamp="duration"
								:show-hours="false" :show-minutes="false" :autoplay="autoplay"></u-count-down>
						</view>
						<view class="u-progress-dot">倒计时</view>

					</view>
				</u-circle-progress>

			</view>

			<view style="padding: 0 32rpx;" v-if="detail.type==1">
				<view class="shuru dis-flex">

					<view @click="shuruEn" class="shuru-en">{{content?content:'请填写以上词汇的英文'}}</view>
					<view v-if="content" @click="clean"><u-icon name="close"></u-icon></view>

				</view>

			</view>
			<view style="padding: 0 32rpx;" v-if="detail.type==2">
				<view class="shuru">
					<input type="text" class="form-item--input" v-model="content" placeholder="请填写以上词汇的中文翻译" />
				</view>

			</view>
			<view style="padding: 0 32rpx;" v-if="detail.type==3">
				<view class="shuru">
					<view @click="shuruEn" class="shuru-en">{{content?content:'请填写听到的英文'}}</view>
					<view v-if="content" @click="clean"><u-icon name="close"></u-icon></view>

				</view>

			</view>
			<view style="padding: 0 32rpx;" v-if="detail.type==4">
				<view class="shuru">
					<input type="text" class="form-item--input" v-model="content" placeholder="请填写听到的中文翻译" />
				</view>

			</view>
			<view style="padding: 0 32rpx;" v-if="detail.type==5">

				<view class="shuru" style="margin-bottom: 10rpx;">
					<input type="text" class="form-item--input" v-model="content2" placeholder="请填写听到的中文翻译" />
				</view>
				<view class="shuru dis-flex">

					<view @click="shuruEn" class="shuru-en">{{content?content:'请填写听到的英文'}}</view>
					<view v-if="content" @click="clean" style="width: 10%;">
						<u-icon name="close"></u-icon>
					</view>
				</view>

			</view>

			<view style="padding: 0 32rpx;" v-if="detail.type==6">
				<view class="shuru dis-flex" style="margin-bottom: 10rpx;">

					<view @click="shuruEn" class="shuru-en">{{content?content:'请填写以上词汇的替换词'}}</view>
					<view v-if="content" @click="clean"><u-icon name="close"></u-icon></view>
				</view>
				<view class="shuru">
					<input type="text" class="form-item--input" v-model="content2" placeholder="请填写以上的中文翻译" />
				</view>

			</view>

			<view class="foot">

				<view class="btn" :class="{ disabled }" @click="next" v-if="index<detail.choose_num-1">
					下一题
				</view>
				<view class="btn" :class="{ disabled }" @click="next" v-else>
					交卷
				</view>
			</view>


		</view>
		<u-popup v-model="datiShow" mode="center" width="80%" border-radius="14" :mask-close-able="false"
			z-index="999999">
			<view class="info">


				<view class="p-shi">
					答题时间结束
				</view>


				<view class="pop-btn">


					<view class="p-btn" @click="dati_next" v-if="index<detail.choose_num-1">下一题</view>
					<view class="p-btn" @click="dati_next" v-else>交卷</view>

				</view>
			</view>
		</u-popup>

		<u-keyboard mode="car" :content="content" @change="valChange" @backspace="backspace" @cancel="cancelKeybord"
			v-model="KeyboardShow"></u-keyboard>


	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as PaperApi from '@/api/ant/paper'

	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	let plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();


	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				datiShow: false,
				KeyboardShow: false,
				timu_title: '',
				paperId: 0,
				duration: 10,
				content: '',
				content2: '',
				percent: 100,
				num: 1,
				index: 0,
				isLoading: true,
				detail: {},
				autoplay: true,
				disabled: false,
				cishu: 0,
				is_play: false,
				content_arr: []
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.paperId = options.paperId
			this.getPaperDetail()



		},

		onShow() {
			this.content = ''
			this.content2 = ''
			this.disabled = false




		},


		methods: {

			clean() {
				this.content = ''
			},

			shuruEn() {
				this.KeyboardShow = true
			},

			cancelKeybord() {
				this.content = ''
				this.content_arr = []
			},

			valChange(e) {
				console.log(e)
				this.content = this.content + e
				var arr = []

				arr.push(e)
				this.content_arr = this.content_arr.concat(arr)
				console.log(this.content_arr)
			},
			backspace(e) {
				var arr = this.content_arr
				this.content_arr.pop()
				this.content = this.content_arr.join('')
				console.log(this.content_arr)
			},

			skvido() {


				// 创建音频对象
				const audio = uni.createInnerAudioContext();

				var timu = encodeURIComponent(this.timu_title)

				// 设置音频源
				//audio.src = 'https://dict.youdao.com/dictvoice?type=0&audio=' + this.timu_title;
				audio.src = 'https://i.antiedu.tech/audit/' + timu + '.mp3';
				//audio.src = 'https://i.antiedu.tech/audit/shuttle bus.mp3';
				console.log(this.timu_title)


				// 播放音频
				audio.play();
				this.is_play = true

				// 监听音频播放完成事件
				audio.onEnded(() => {
					this.is_play = false
					console.log('音频播放完成');
				});

				// 监听音频播放错误事件
				audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)

						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {

							_this.skvido()
							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},

			getPaperDetail() {
				const app = this
				app.isLoading = true

				PaperApi.detail_ing(app.paperId)
					.then(result => {

						if (result.data.status == 500) {
							uni.showToast({
								title: result.message,
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}, 2000)

							return
						}


						app.detail = result.data.detail
						app.duration = result.data.detail.time


						if (result.data.detail.type == 1) {
							app.timu_title = result.data.detail.timu[0].name_cn
						} else {
							app.timu_title = result.data.detail.timu[0].name
						}
						app.isLoading = false
						// 	app.autoplay=true
						// }

					})
			},

			next() {

				if (this.disabled) {
					return
				}

				// if (this.detail.type == 5 || this.detail.type == 6) {
				// 	if (this.content == '' || this.content2 == '') {
				// 		uni.showToast({
				// 			title: '请填写答案',
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// } else {
				// 	if (this.content == '') {
				// 		uni.showToast({
				// 			title: '请填写答案',
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// }


				this.disabled = true



				var index = this.index



				this.detail.timu[index].content = this.content
				this.detail.timu[index].content2 = this.content2


				this.detail.timu[index].type = this.detail.type

				this.queu_answer(index)


			},

			dati_next() {




				var index = this.index



				this.detail.timu[index].content = this.content
				this.detail.timu[index].content2 = this.content2


				this.detail.timu[index].type = this.detail.type

				this.queu_answer(index)
				this.datiShow = false


			},

			hand_paper() {
				let app = this

				app.disabled = true

				PaperApi.hand_paper(app.detail)
					.then(result => {
						uni.redirectTo({
							url: '/pages/ant/exam/result?paperId=' + app.detail.paper_id
						})
					}).finally(() => app.disabled = false)
			},

			start() {
				// if(this.disabled){
				// 	return
				// }
				// this.disabled=true
				if (this.cishu == 0) {
					this.$refs.uCountDown.start();
				}
				this.cishu += 1


				this.skvido()

			},
			queu_answer(index) {
				PaperApi.queu_answer(this.detail.timu[index])
					.then(result => {
						uni.showToast({
							title: result.message,
							icon: 'none'
						})
						setTimeout(() => {


							if (index == this.detail.choose_num - 1) {
								this.disabled = false
								this.hand_paper()
								return
							} else {

							}

							this.cishu = 0

							this.percent = 100
							this.num += 1
							this.index = index + 1
							this.duration = this.detail.time
							this.timu_title = this.detail.timu[index + 1].name


							if (this.detail.type == 1) {
								this.timu_title = this.detail.timu[index + 1].name_cn
							} else {
								this.timu_title = this.detail.timu[index + 1].name
							}

							this.content = ''
							this.content2 = ''
							this.content_arr = []
							this.skvido()
							this.$refs.uCountDown.start();
							this.disabled = false
							return


						}, 1000)






					})
			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
				var duration = this.duration
				console.log(timestamp / duration);

				this.percent = 100 * timestamp / duration

				if (timestamp == 0) {
					this.datiShow = true
					this.KeyboardShow = false
				}



			},



		}
	}
</script>

<style lang="scss" scoped>

	.info {
		min-height: 200rpx;
		text-align: center;
		padding: 20rpx 30rpx;
		background-color: #F5F5F5;

		.p-name {
			height: 80rpx;
			color: rgba(22, 132, 252, 1);
			font-size: 56rpx;
		}

		.p-tihuan {

			height: 76rpx;
			line-height: 76rpx;
			color: rgba(0, 0, 0, 1);
			font-size: 40rpx;
		}

		.p-shi {
			height: 106rpx;
			line-height: 106rpx;
			text-align: center;
			color: rgba(0, 0, 0, 1);
			font-size: 40rpx;
		}

		.jieshi {
			background-color: #FFF;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}

		.pop-btn {
			display: flex;
			justify-content: center;
		}

		.p-btn {
			margin-top: 40rpx;
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 60rpx;
			background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}
	}

	.container {
		height: 932px;
		width: 100%;

		background: linear-gradient(180deg, rgba(225, 239, 255, 1) 0%, rgba(255, 255, 255, 0.88) 97%);
	}

	.form-item--input {
		height: 200rpx;
		line-height: 200rpx;

	}

	.shuru-en{
		width: 90%;height: 200rpx;line-height: 200rpx;
		
	}

	.foot {

		width: 70%;
		margin: auto;
		margin-top: 150rpx;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;

		// 禁用按钮
		&.disabled {
			opacity: 0.6;
		}
	}

	.shuru {

		width: 100%;
		background-color: #F1F7F7;
		height: 200rpx;
		border-radius: 8rpx;
		color: #64AEFF;
		font-size: 28rpx;
		line-height: 200rpx;
		padding-left: 20rpx;
		
		input{
			height: 200rpx;
			line-height: 200rpx;
		}

	}

	.content-box {
		display: flex;
		padding: 0 30rpx;
		margin-bottom: 100rpx;
	}


	.u-progress-content {
		text-align: center;
		font-size: 14rpx;
	}

	.u-progress-dot {}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	.left {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 100rpx;

		.timu {
			height: 350rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 56rpx;
			color: #1684FC;
		}

		.gif {
			height: 400rpx;
		}

		.gif image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.right {
		// background-color: #111;
		position: absolute;
		right: 50rpx;
		top: 100rpx;
		width: 20%;
		display: flex;
		justify-content: center;
		font-size: 12rpx;
	}


	.top {
		padding: 30rpx 70rpx;
		display: flex;
		justify-content: space-between;

	}

	.box {
		width: 700rpx;
		height: 1198rpx;
		margin: 0 auto;

		border-radius: 30rpx 30rpx 0px 30rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
	}
</style>